<!--流程展示-->
<template>
  <div class="diagram-container home">
    <!--显示流程名-->
    <h4 id="diagramName" class="text-center" style="margin-top: 0;">
      <span class="process-name"></span><span style="font-size:12px;" class="process-status"></span>
    </h4>
    <!--流程图背景图例-->
    <div class="legend">
      <label >已拒绝:</label><span class="refuse"></span>
      <label style="margin-left: 20px;">已审批:</label><span class="finish"></span>
      <label style="margin-left: 20px;">当前节点:</label><span class="current"></span>
      <label style="margin-left: 20px;">未审批:</label><span class="unfinish"></span>
    </div>
    <!--画布-->
    <div
      id="canvas"
      class="wf_canvas"
      style="height: 250px;">
    </div>
  </div>
</template>

<script>
  /* ajax请求 */
  import * as kk from '@/utils/k-utils'

  export default {
    name: 'FlowDiagram',
    props: {
      // 保存列表页面传过来的数据，子组件接受父组件数据
      param: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        canvas: {}, // 画布对象
        first: true // 是否第一次打开
      }
    },
    // 执行一次，且第一次执行
    mounted() {
      this.init()
      this.first = true
    },
    // 组件被激活，第一次不执行
    activated() {
      // this.param父组件改变该属性值
      if (this.first) {
        this.first = false
        return
      }
      // 清空数据，再重新渲染
      this.canvas.clear()
      $('#canvas').html('')
      // 重新初始化流程图
      this.refreshWorkflow(this.canvas)
    },
    methods: {
      init() {
        // 获取流程图相关信息,并显示出来
        var $canvas = $('#canvas')
        this.canvas = $canvas.Flowdesign({
          createCanvasMenus: false,
          createConnectionMenus: false,
          createProcessMenus: false,
          fnDbClick: function() {
          }
        })
        // 重新初始化流程图
        this.refreshWorkflow(this.canvas)
      },
      // 重新初始化流程图
      refreshWorkflow(_canvas) {
        // console.log('refreshWorkflow-' + JSON.stringify(this.param))
        var _this = this
        // 获取流程图相关信息,并显示出来
        // 如果是开始流程，则从processName中获取。否则从processId中获取
        var url = '/process/getDiagram.json?processId=' + this.param.processId
        kk.k_load_url('workflow', url, {}).then(rep => {
          rep = JSON.parse(rep)
          if (rep.status === '200') {
            var result = rep['data']
            var processData = JSON.parse(result)
            var params = {}
            _this.copyObj(_this.param, params)
            // 渲染流程图，并且高亮当前节点和其它审批节点的背景色
            params.url = kk.k_get_env() + '/workflow/task/hisTaskDetail.json'
            _canvas.refreshDetail(processData, params)
          } else {
            _this.$message(rep.message)
          }
        })
      },
      // 将obj1对象的数据拷贝到obj2对象
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          // 原型对象不拷贝
          if (key === '__proto__') {
            continue
          }
          // 自动将number转换成string
          if (typeof obj1[key] === 'number') {
            obj1[key] = '' + obj1[key]
          }
          obj2[key] = obj1[key]
        }
      }
    }
  }
</script>

<style>
  /* 引入样式 */
  @import '../../../../../public/css/workflow/kayakwiseflowdesign.css';
</style>
<style scoped>
  /*让文本可以被选中*/
  .home {
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
